import React from 'react'
import { connect } from 'dva';
import {
    Button, Icon, Form, Input, Upload, Radio, message
} from 'antd';
import './Banner.scss';
import ShowTitleList from './ShowTitleList';
import Uploads from './Upload';
import { UrlConfig } from '../../../services/fetch';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

@connect(({ add }) => ({
    add: add
}))
@connect(({ video }) => ({
    video
}))
class Banner extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            titleLength: 0,
            keyLength: 0,
            radioValue:1,
            img:''
        }
        this.props.onRef(this)
    }

    componentDidMount() {

    }
    /**
     * 获取title length
     */
    getTitleLength=(e)=>{
        let length = e.target.value.length
        if(length<=60){
            this.setState({
                titleLength: length
            })
        }
        window.PubSub.publish('tabTitle',e.target.value)
    }

    /**
     * 获取表单的值
     */
    getFieldsValueTab=()=>{
        let data = this.props.form.getFieldsValue()
        data["type"] = 3
        return data
    }
    getFieldsValue=()=>{
        let data = this.props.form.getFieldsValue()
        this.props.form.validateFields()
        let validateArr = this.props.form.getFieldsError()
        let isDown = true
        for (const key in validateArr) {
            if (validateArr.hasOwnProperty(key)) {   //判断是否有效验错误
                if(validateArr[key]){
                    isDown = false
                    return
                }
            }
        }
        if(isDown){
            data["type"] = 3
            return data
        }
    }
    /**
     * 重置表单
     */
    resetFields=()=>{
        this.props.form.resetFields()
    }
    /**
     * 设置值
     */
    setFields=(data)=>{
        this.props.form.setFieldsValue(data)
        this.setState({
            img: data.information_img
        })
        if(data.banner_used_id){
            this.setState({
                radioValue: 1,
                url:'',

            })
        } else if(data.url){
            this.setState({
                radioValue: 2
            })
        }
    }
    /**
     * radio 受控
     */
    onChangeRadio=(e)=>{

        this.setState({
            radioValue: e.target.value
        });
        if(e.target.value == 1){
            this.setFields(
                {
                    url:''
                }
            );
        }
    }



    render() {
        const { getFieldDecorator } = this.props.form;
        const myValidateFields = (rule, values, callback) => {
            var reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
            if(values){
                if(!reg.test(values)){
                    callback('请输入正确的URL')
                }
            }
            callback()
        };
        const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 3 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 21 },
        },
        };

        //将当前this传递给父组件
        this.props.onRef(this)
        return (
            <div className="Banner">
                 <Form >
                    <FormItem
                    label=""
                    >
                    <p className="title_show">
                        <span style={{color:'red'}}>*</span>
                    {getFieldDecorator('information_title', {
                        rules: [{
                        required: true, message: '请输入标题',
                        }],
                    })(
                        <Input placeholder="请输入标题" className="artical_title" onChange={this.getTitleLength}
                            size="large" style={{width:'100%',paddingRight:'90px'}} maxLength={250}/>
                    )}
                        <span className="rightInput">{this.state.titleLength}/250</span>
                    </p>
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="关键字"
                    >
                    {getFieldDecorator('key_words')(
                        <Input className="keyInput" onChange={e=>{
                            let data = e.target.value
                            if(data.length<=250){
                                this.setState({
                                    keyLength: data.length,
                                })
                            }
                        }} maxLength={250}/>
                    )}
                    <span className="showKeyLength">{this.state.keyLength}/250</span>
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="摘要"
                    >
                    {getFieldDecorator('intro')(
                        <TextArea placeholder="请输入摘要" autosize={{ minRows: 2, maxRows: 6 }} className="introInput"
                        onChange={e=>{
                            let data = e.target.value
                            if(data.length<=1000){
                                this.setState({
                                    introLength: data.length
                                })
                            }
                        }} maxLength={1000}/>
                    )}
                    <span className="showTextLength">{this.state.introLength}/1000</span>
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="图片"
                    >
                    {getFieldDecorator('information_img', {
                        rules: [{
                        required: true, message: '请上传图片',
                        }],
                    })(
                            <Input style={{display:'none'}}/>
                    )}
                    <Uploads form={this.props.form} img={this.state.img} setFields={this.setFields}/>
                    </FormItem>
                    <b style={{marginLeft:'50px',color:'#000',marginBottom:'10px'}}>注：根据版面样式自定义图片尺寸，不超过2M，格式为jpg/png，从左侧图片库选取可以直接替换</b>
                    <RadioGroup onChange={this.onChangeRadio} value={this.state.radioValue} style={{marginBottom:'20px',marginLeft:'20px'}}>
                        <Radio value={1}>关联内容选择</Radio>
                        <Radio value={2}>URL链接</Radio>
                    </RadioGroup>
                    <FormItem
                    {...formItemLayout}
                    label="URL链接"
                    style={this.state.radioValue===1?{display:'none'}:{}}
                    >
                    {getFieldDecorator('url',{
                        rules:[{
                            validator: myValidateFields
                        }]
                    })(
                        <Input placeholder="请输入链接地址"/>
                    )}
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="选择内容"
                    style={this.state.radioValue===2?{display:'none'}:{}}
                    >
                    {getFieldDecorator('banner_used_title')(
                        <Input placeholder="内容标题" disabled style={{width:'400px',marginRight:'20px'}}/>
                    )}
                    <ShowTitleList temp={1} form={this.props.form} id={this.props.video.initTableName}/>
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="关联标题"
                    style={{display:'none'}}
                    >
                    {getFieldDecorator('banner_module_name')(
                        <Input />
                    )}
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="关联id"
                    style={{display:'none'}}
                    >
                    {getFieldDecorator('banner_used_id')(
                        <Input />
                    )}
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label="关联type"
                    style={{display:'none'}}
                    >
                    {getFieldDecorator('banner_used_type')(
                        <Input />
                    )}
                    </FormItem>

                </Form>
            </div>
        )
    }
}

const Banners = Form.create()(Banner);
export default Banners;
